<template>
  <el-dialog
    title="调整关联课程"
    :visible.sync="dialogVisible"
    :before-close="handleClose">
    
    <el-row class="fitersLine">
      <el-col :span="20">
        <el-form :inline="true">         
          
          <el-form-item label="类型">
            <el-select v-model="commodityParams.commodityType" placeholder="请选择" clearable>
              <el-option v-for="item in commodityTypeList" :key="item.id" :label="item.typeName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="是否为广告课程">
            <el-select v-model="commodityParams.isAd" placeholder="请选择" clearable>
              <el-option v-for="ad in isAdList" :key="ad.id" :label="ad.name" :value="ad.type">
              </el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="是否为vip商品">
            <el-select v-model="commodityParams.isVip" placeholder="请选择" clearable>
              <el-option v-for="vip in isVipList" :key="vip.id" :label="vip.name" :value="vip.type">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="商品名称">
            <el-input v-model="commodityParams.title" placeholder="请输入商品名称"></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button class="filter-item" style="margin: 0 0 30px 30px;" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
          </el-form-item>

        </el-form>
      </el-col>
    </el-row>
   
    <el-table
      highlight-current-row 
      v-if="!pushAllResult"
      :data="commodityLists"
      v-loading="commodityListLoading"
      element-loading-text="数据加载中，请稍后"
      ref="list"
      @select='getEveryPageSlectionChanged'
      @select-all='getEveryPageSlectionAllChanged'
       :row-key="getRowKey"  
    >
      <el-table-column type="selection" width="100" align="center"></el-table-column>
      <el-table-column property="courseId" label="课程ID" width="100" align="center"></el-table-column>
      <el-table-column property="title" label="课程名称" width="100" align="center"></el-table-column>
      <el-table-column property="commodityType" label="课程类型" width="100" align="center" prop="commodityType">
        <template slot-scope="scope"> {{scope.row.commodityType ===1 ? '视频' : scope.row.commodityType ===2 ? '图文' : '语音'}} </template>
      </el-table-column>
      <el-table-column property="topicName" label="课程分类" width="100" align="center"></el-table-column>
      <el-table-column property="isAd" label="是否为广告课程" width="100" align="center" prop="isAd">
        <template slot-scope="scope"> {{scope.row.isAd ? '是' : '否' }} </template>
      </el-table-column>
      <el-table-column property="isVip" label="是否为VIP课程" width="100" align="center" prop="isVip">
        <template slot-scope="scope"> {{scope.row.isVip ? '是' : '否' }} </template>
      </el-table-column>
    </el-table>

    <div v-show="!pushAllResult" class="pagination-container">
      <el-pagination 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="commodityParams.pageNo"
        :page-sizes="[10,20,30,50]" 
        :page-size="commodityParams.pageSize" 
        layout="total, sizes, prev, pager, next, jumper" 
        :total="total"
      >
      </el-pagination>
    </div>

    <el-col style="margin: 20px 30px 30px 10px; width: 98%;">
      <b style="margin-left:10px">已选择课程：</b>
      <span>{{ getCommodityLists(momentSelectedCom) }}</span>
    </el-col>
    
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSaveChoose">保 存</el-button>
    </span>

  </el-dialog>  
</template>

<script>
import { getCouPage } from '@/api/path'
export default {
  name: 'setCommodities',
  data() {
    return {
      getRowKey(row) {
        return row.courseId
      },
      commodityTypeList:[
        { id:1, typeName:'视频' },
        { id:2, typeName:'图文' },
        { id:3, typeName:'语音' }
      ],
      isAdList: [{
        id: 1,
        name: '是',
        type: 1
      }, {
        id: 2,
        name: '否',
        type: 0
      }],
      isVipList: [{
        id: 1,
        name: '是',
        type: 1
      }, {
        id: 2,
        name: '否',
        type: 0
      }],
      checkedData: [],
      dialogVisible: false,
      isCommodityLoading: false,
      pushAllResult: false, // false: 非全选 ; true : 全选
      commodityListLoading: false,
      total: null,
      commodityLists: null,
      momentSelectedCom: [],
      commodityByTitleOptions: [],
      addCommodityLists: [],
      commodityName: null,
      topicName: null,
      commodityType: null,
      isAd: null,
      isVip: null,
      commodityParams: {
        pageNo: 1,
        pageSize: 10,
        courseId: null,
        title: null,
        commodityType: null, // 商品类型
        isAd: null, // 是否为广告课程
        isVip: null // 是否为vip课程
      }
    }
  },
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    setMsgObj: {
      type: Object,
      default: {},
      children: {
        setCommodityLists: {
          type: Array,
          default: []
        }
      }
    }
  },
  watch: {
    dialog(boolean) {
      this.dialogVisible = boolean
      this.pushAllResult = ''
      this.commodityParams.commodityType = null
      this.commodityParams.title = ''
      this.getCommodities()
    },
    setMsgObj(obj) {
      this.momentSelectedCom = []
      for (const item of obj.setCommodityLists) {
        if (this.momentSelectedCom.indexOf(item) == -1) {
          this.momentSelectedCom.push(item)
        }
      }
      // console.log("momentSelectedCom_watch",this.momentSelectedCom)
    }

  },
  mounted() {
    this.getCommodities()
  },
  methods: {
    checked(){
      this.checkedData.filter(checked => {
        this.$refs.list.toggleRowSelection(checked, true)
      })
    },

    // 关联课程列表展示
    getCommodityLists(data) {
      let commodityLists = ''
      for (let i = 0; i < data.length; i++) {
        commodityLists += data[i].title
        if (i < data.length - 1) {
          commodityLists += '，'
        }
      }
      return commodityLists
    },
    // 点击模态框中的'X'
    handleClose() {
      const that = this
      this.$confirm('数据未保存，确认关闭？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.$emit('cancel')
      }).catch(() => {})
    },
    // 点击'保存'按钮
    handleSaveChoose() {
      // console.log('momentSelectedCom_dialogsave',this.momentSelectedCom)
      this.$emit('handleDialogSaveCom', this.momentSelectedCom)
    },
    // 点击'搜索'按钮
    handleFilter() {
      this.commodityParams.pageNo = 1
      this.getCommodities()
    },

    getCommodities() {
      this.commodityListLoading = true
      const { commodityParams } = this
      getCouPage(commodityParams).then(response => {
        const { code, data:{ total, list } } = response
        if(code == 0){
          this.checkedData = []
          this.total = total
          this.commodityLists = list
          this.commodityListLoading = false
          this.commodityLists.filter((selected) => {
            this.momentSelectedCom.forEach(val => {
              if (val.courseId === selected.courseId) {
                this.checkedData.push(selected)
              }
            })
          })
        }
      }).then(response => {
        this.checked()
      })
    },
    handleSizeChange(val) {
      this.commodityParams.pageSize = val
      this.getCommodities()
    },
    handleCurrentChange(val) {
      this.commodityParams.pageNo = val
      this.getCommodities()
    },
    //去重
    // quChong(obj) {
    //     this.addCommodityLists=[]
    //     const res = new Map()
    //     this.addCommodityLists=obj.filter((a) => !res.has(a.courseId) && res.set(a.courseId, 1))
    // },

    // 单选触发的事件
    getEveryPageSlectionChanged(selection, row) {
      let isSeleted = false
      for (const item of this.momentSelectedCom) {
        if (item.courseId == row.courseId) {
          isSeleted = true
          // this.$refs.list.toggleRowSelection(row,false)
        }
      }
      if (!isSeleted) {
        this.momentSelectedCom.push(row)
        // this.addCommodityLists=this.momentSelectedCom;
      } else{
        this.momentSelectedCom = this.momentSelectedCom.filter(x => x.courseId != row.courseId)
        // this.addCommodityLists = this.addCommodityLists.filter(x => x.courseId != row.courseId)
      }
    },
    // 全选触发的事件
    getEveryPageSlectionAllChanged(selection) {
      if (selection.length > 0) {
        for (const item of selection) {
          const index = this.momentSelectedCom.indexOf(item)
          if (index == -1) {
            this.momentSelectedCom.push(item)
            this.addCommodityLists.push(item)
          }
        }
      } else {
        for (const item of this.commodityLists) {
          this.momentSelectedCom = this.momentSelectedCom.filter(x => x.courseId != item.courseId)
          this.addCommodityLists = this.addCommodityLists.filter(x => x.courseId != item.courseId)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .pagination-container{
    margin-top:30px;
  }
</style>
